<template>
	<view class="page_bg pos_rel">
		<image src="https://www.worldintek.com:39011/yaolexue-service/icon_dati_bg.png" class="imgbg"></image>
		<view class="pos_rel answer-box">
			<view class="answer">
				<view class="flex justify-between align-center answer-title">
					<view>
						{{answerNowData.question.questionType == 1 ? '单选题' : '多选题'}} 
					</view>
					<view class="font_w600">
						<text class="cr-333 font_s36 ">{{answerIndex + 1}}</text>
						<text class="cr-999 font_s26">/{{dayAnswerList.length}}</text>
					</view>
				</view>
				<block v-for="(item,index) in dayAnswerList" :key="index">
					<block v-if="index == answerIndex">
						<view class="answer-content">
							{{item.question.title}}
						</view>
						<view class="an-check mar-top20">
							<block v-for="(v,k) in item.options" :key="v.id">
								<view :class="v.classed || ''" @click="clickOptions(v,k,item,index)">
									<image v-if="v.classed == 'error'" src="https://www.worldintek.com:39011/yaolexue-service/icon-error.png" class="w-31 h-31 mar-right12"></image>
									<image v-else-if="v.classed == 'success'" src="https://www.worldintek.com:39011/yaolexue-service/icon-success.png" class="w-31 h-31 mar-right12"></image>
									<text v-else class="w-31 h-31 mar-right12">{{v.optionIndex}}.</text>
									{{v.optionContent}}
								</view>
							</block>						
						</view>
					</block>
				</block>
				
				<view class="flex align-center btn-box">
					<view @click="answerIndex -= 1" v-if="answerIndex > 0" class="flex up-btn">
						上一题
					</view>
					<view @click="clickNextSubmit" class="an-btn flex align-center justify-center">
						<text>{{subBtnText}}</text>
					</view>
				</view>
				
			</view>
		</view>
		<view v-if="answerNowData.isAnswerClick" class="pos_rel answer-analysis">
			<view class="anal-title flex align-center pos_rel">
				<image src="https://www.worldintek.com:39011/yaolexue-service/icon_dati.png" class="w-52 h-60 anal-t-img"></image>
				<text class="padd-left76">答案解析</text>
			</view> 
			<view>
				<view class="cr-333 font_s36 font_w600 mar-top39">
					正确答案：{{answerNowData.answerOptionsStr}}
				</view>
				<view class="anal-content mar-bottom40">
					{{answerNowData.question.answerAnalysis || ''}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				type:1,			//1=每日答题;2=专项答题  
				dayAnswerList:[],
				answerIndex:0
			}
		},
		computed:{
			answerNowData(){
				if(this.dayAnswerList.length){
					let data = this.dayAnswerList[this.answerIndex]
					let answerOptionsStr = data.options.filter(item => {return item.isRight}).map(item => item.optionIndex)		//正确答案的选项
					console.log(answerOptionsStr)
					console.log(data.question,'===>question')
					return {
						...data,
						answerOptionsStr:answerOptionsStr.join(','),
						isAnswerClick:data?.isAnswerClick ?? false
					}
				}else{
					return {
						options:{},
						question:{},
						isAnswerClick:false
					}
				}				
			},
			subBtnText(){
				return this.answerNowData.isAnswerClick ? '下一题'  : '确    定'
			}
		},
		onLoad(options) {
			this.type = options.type
			if(this.type == 1){
				this.getDayAnswer()
			}
		},
		methods:{
			getDayAnswer(){
				this.$http.get(`/yaolexue-service-portal/exam/daily/questions`,{
					
				}).then(res => {
					if(res.code == 200){
						res.data.questions.map(v => {
							console.log(v)
							return {
								...v,
								isAnswerClick:false,
								options: v.options.sort((a,b) => {
									return a.optionIndex.localeCompare(b.optionIndex)
								})
							}
						})
						this.dayAnswerList = res.data.questions
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			},
			clickOptions(v,k,item,index){
				console.log(v,'===>optionsVal')
				// optionsVal.classed = 'checked'
				if(!item.isAnswerClick){
					if(item.question.questionType == 1){
						let op = item.options.map((itemv,indexv) => {
							return {
								...itemv,
								classed:indexv != k ? '' : itemv.classed ? '' : 'checked'
							}
						})
						this.$set(item,'options',op)
						console.log(item)
						// this.$set(v,'classed',v.classed ? '' : 'checked')
					}else{
						this.$set(v,'classed',v.classed ? '' : 'checked')
					}
					
					let optionsAnswerArr = item.options.filter(f => {
						return f.classed
					})
					this.$set(item,'answerClickArr',optionsAnswerArr)
					
				}
			},
			clickNextSubmit(){
				
				if(this.answerIndex >= this.dayAnswerList.length - 1 && this.answerNowData.isAnswerClick){
					console.log('最后一题')
					uni.navigateTo({
						url:`/subPages/answerRes/answerRes?type=${this.type}`
					})
					return
				}
				
				if(this.answerNowData.isAnswerClick){
					this.answerIndex++
					return
				}
				if(!(this.answerNowData?.answerClickArr?.length ?? 0)){
					uni.showToast({
						title:'请选择答案',
						icon:'none'
					})
					return
				}
				this.$set(this.dayAnswerList[this.answerIndex],'isAnswerClick',true)
				let options = this.dayAnswerList[this.answerIndex].options.map(item => {
					item.classed = item.classed ? item.isRight ? 'success' : 'error' : item.isRight ? 'success' : ''
				})
				this.getCheckAnseer()
			},
			getCheckAnseer(){
				this.$http.post('/yaolexue-service-portal/exam/daily/question/answer/check',{
					questionId:this.answerNowData.question.id,
					answers:this.answerNowData.answerClickArr.map(item => {
						return item.optionIndex
					})						
				}).then(res => {
					if(res.code == 200){
						getApp().globalData.dayAnswerRes = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgbg{
		width: 100%;
		height: 1081rpx;
		position: absolute;
		top: 0;
	}
	.answer-box{
		width: 640rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 56rpx auto 0 auto;
		z-index: 1;
		&::before{
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background: #fff;
			opacity: 0.5;
			border-radius: 16rpx;
			transform: rotate(-2deg);
			top: 0;
			z-index: -1;
		}
		.answer{
			padding: 0 23rpx 10rpx 23rpx;
			.answer-title{
				height: 85rpx;
				border-bottom: 1px solid #E1E1E1;
			}
			.answer-content{
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-top: 36rpx;
				line-height: 50rpx;
				font-family: Source Han Sans CN;
			}
			.an-check{
				&>view{
					width: 594rpx;
					height: 78rpx;
					border-radius: 10rpx;
					background: #F5F5F5;
					border: 1rpx solid #E1E1E1;
					box-sizing: border-box;
					color: #666666;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					padding: 0 43rpx;
					margin-top: 35rpx;
				}
				.checked{
					background: #ECE6D8;
					border: 1rpx solid #E0B756;
					color: #E0B756;
				}
				.error{
					background: #FED7D7;
					border: 1px solid #FA312A;
					color: #FA312A;
				}
				.success{
					background: #ACE4BD;
					border: 1px solid #1EB14B;
					color: #1EB14B;
				}
			}
			.btn-box{
				margin: 96rpx auto 43rpx auto;
				.up-btn{
					min-width: 254rpx;
					height: 78rpx;
					border: 1rpx solid #FD490A;
					border-radius: 10rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FD490A;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 86rpx;
				}
				.an-btn{
					flex: 1;
					min-width: 254rpx;
					height: 78rpx;
					background: #FA312A;
					border-radius: 10rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FEFEFE;
				}
			}
			
		}
	}
	.answer-analysis{
		width: 640rpx;
		min-height: 407rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 80rpx auto 0 auto;
		padding: 0 22rpx;
		.anal-title{
			width: 100%;
			height: 85rpx;
			border-bottom: 1px solid #E1E1E1;
			.anal-t-img{
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		.anal-content{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			line-height: 50rpx;
			margin-top: 37rpx;
		}
	}
</style>
